<template>
	<view>
		<u-swiper :list="list5" @change="(e) => (current = e.current)" :autoplay="false" height="600" radius="0">
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in list5" :key="index" :class="[index === current && 'indicator__dot--active']"></view>
			</view>
		</u-swiper>

		<view class="btns">
			<button class="btn1" @click="toLogin">登录</button>
			<button class="btn2" @click="register">注册</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			list5: ['https://picsum.photos/750/1500?id=1', 'https://picsum.photos/750/1500?id=12', 'https://picsum.photos/750/1500?id=3']
		};
	},
	onLoad() {
		// 如果已经登录，则跳转到商城首页
		let token = uni.getStorageSync('token');
		if (token) {
			uni.reLaunch({
				url: '/pages/mall/index/index'
			});
		}
	},
	methods: {
		toLogin() {
			uni.navigateTo({
				url: '/pages/login/login?type=login'
			});
		},
		register() {
			uni.navigateTo({
				url: '/pages/login/login?type=register'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.indicator {
	@include flex(row);
	justify-content: center;
	// position: fixed;
	// bottom: 10rpx;
	&__dot {
		height: 16rpx;
		width: 16rpx;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.35);
		margin: 0 5px;
		transition: background-color 0.3s;

		&--active {
			width: 32rpx;
			background-color: $uni-theme-color;
		}
	}
}
.btns {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.btn1,
	.btn2 {
		width: 286rpx;
		height: 100rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
	.btn1 {
		background: #f0f0f0;
		color: #1e1f20;
	}
	.btn2 {
		background: $uni-theme-color;
		color: #fff;
	}
}
</style>
